<template>
  <div class="frend">
    <!-- 标题栏 -->
    <mt-header fixed :title="title">
      <mt-button icon="back" slot="left" v-on:click="goBack"></mt-button>
    </mt-header>

    <!-- 用来给标题栏占位 -->
    <div style="height: 2.75rem;width: 100%;"></div>

    <!-- 好友item -->
    <div class="friendItem" v-for="item in list" :key="item.id">
      <div
        class="headPortrait"
        :style="{ backgroundImage: 'url(' + item.picture + ')' }"
      ></div>
      <div class="userName">{{ item.phone }}</div>
    </div>
    <div style="height: 3.5625rem;"></div>
  </div>
</template>

<script>
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      title: "我的好友",
      list: [
        
      ]
    };
  },
  created() {
    this.selectFriendList();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    selectFriendList() {
      //好友列表页
      Indicator.open({ spinnerType: "fading-circle" });
      let me = this;
      this.$axios
        .post(
          "/api/home/goodFriend",
          {
            uid: localStorage.uid
          },
          {
            emulateJSON: true
          }
        )
        .then(kun => {
          console.log(kun);
          Indicator.close();
          if (kun.code == 200) {
            me.list = kun.data;
          } else {
            Toast(kun.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}

// 标题栏
.mint-header {
  height: 2.75rem;
  line-height: 1.25;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff7f5f+25,e5274d+75 */
  background: rgb(255, 127, 95);
  /* Old browsers */
  background: -moz-linear-gradient(
    -45deg,
    rgb(255, 127, 95) 25%,
    rgb(229, 39, 77) 75%
  );
  /* FF3.6-15 */
  background: -webkit-linear-gradient(
    -45deg,
    rgb(255, 127, 95) 25%,
    rgb(229, 39, 77) 75%
  );
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    135deg,
    rgb(255, 127, 95) 25%,
    rgb(229, 39, 77) 75%
  );
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7f5f', endColorstr='#e5274d', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}

.friendItem {
  width: 21.5625rem;
  height: 3.125rem;
  margin: 0 auto;
  margin-top: 0.9375rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-shadow: 0rem 0.125rem 0.5rem rgba(0, 0, 0, 0.05);
  // box-shadow: 0rem 0.1875rem 0.75rem rgba(0, 0, 0, 0.05);
  border-radius: 0.3125rem;

  .headPortrait {
    width: 2.1875rem;
    height: 2.1875rem;
    border-radius: 50%;
    background-image: url(../../assets/head_portrait.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    margin-left: 0.625rem;
  }

  .userName {
    margin-left: 0.625rem;
  }
}
</style>
